<!-- vuex 数组中的一个对象的展示 -->
<template>
  <div class="box">
     <div class="item-selector">
                <CheckButton :isChecked="shopcaritem.checked" :shopcaritem="shopcaritem" @click.native="pick"></CheckButton>
     </div>
      <div>
           <img :src="shopcaritem.photo" alt="">
     </div>
     <div class="two">
           <p>{{shopcaritem.title}}</p>
           <span>{{shopcaritem.price}}</span>
           <div>✖{{shopcaritem.count}}</div>
     </div> 
  </div>
</template>

<script>
import CheckButton from "components/content/checkbuttom.vue"


export default {
    name:'shopgoodsitem',
    props: {
         shopcaritem:{
             type:Object,
             defalut(){
                  return {}
             }
         }
    },
    components: {
         CheckButton
    },
    methods: {
         pick(){
               this.shopcaritem.checked= ! this.shopcaritem.checked
               console.log(this.$store.state.shopcar)
         }
    }
  
    
}

</script>
<style scoped>
.box{
     display: flex;
     margin-top: 5px;
     border-bottom: 1px solid gray;
}
.box>div:nth-child(2){
     flex: 3;
     display: flex;
     justify-content: center;
}
.box>div:nth-child(3){
     flex: 6;
     margin-left: 5px;
}
.two>span:nth-child(2){
     display: inline-block;
     color: red;
     margin-top: 15px;
}
.box>div:nth-child(2)>img{
    width: 100%;
}
</style>